<template>
  <div class="login">
    <h2>湖南家政</h2>
    <van-row type="flex" justify="center" align="center">
      <p>用户登录</p>
      <van-form @submit="onSubmit" validate-first>
        <van-field
          v-model="phone"
          name="phone"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[
            { required: true, message: '手机号不能为空' },
            { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' },
          ]"
        />
        <van-field
          v-model="code"
          type="number"
          name="code"
          label="验证码"
          placeholder="验证码"
          :rules="[
            { required: true, message: '验证码不能为空' },
            { pattern: /^\d{6}$/, message: '验证码格式错误' },
          ]"
        >
        </van-field>
        <van-button
          class="getCode"
          type="info"
          round
          size="small"
          @click="getCode"
          >获取验证码</van-button
        >
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >登录</van-button
          >
        </div>
      </van-form>
    </van-row>
  </div>
</template>

<script>
import { getUserInfoByPhone } from '@/api'
export default {
  name: 'Login',
  data () {
    return {
      phone: '13100000003',
      code: '123456'
    }
  },
  created () {},
  mounted () {},
  methods: {
    getCode (e) {
      e.preventDefault() // 阻止表单默认提交的行为
      if (this.phone === '') {

      } else {
        this.$toast('验证码：123456')
      }
    },
    async onSubmit () {
      await this.$store.dispatch('getUserInfo', parseInt(this.phone))
      if (!this.$store.state.userInfoMD) {
        this.$toast('没有此账户')
      } else {
        if (this.code === '123456') {
          this.$toast('登录成功')
          this.$router.push('/')
        } else {
          this.$toast('验证码错误')
          this.code = ''
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.login {
  height: 100vh;
  background-color: #39a9ed;
  h2 {
    margin: 0;
    padding-top: 200px;
    text-align: center;
  }
  .van-form {
    .van-field__control {
      padding-right: 22px;
    }
  }
}
</style>
